<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:p="http://primefaces.org/ui"
		template="/WEB-INF/templates/general.xhtml">
		
	<ui:define name="title"><h:outputText value="My Account Home" /></ui:define>
	<ui:define name="header"><h:outputText value="My Account Home" /></ui:define>		

	<ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">DataTable - Lazy Loading</h1>
        <div class="entry">
            <p>DataTable has built-in support to deal with huge datasets. In order to enable lazy loading, a LazyDataModel needs to be implemented
                to query the datasource when pagination, sorting, filtering or live scrolling happens.
                This example demonstrates uses an in-memory list to mimic a real datasource like a database.</p>

            <h:form id="form">

                <p:dataTable var="car" value="#{tableBean.lazyModel}" paginator="true" rows="10"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                             rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{tableBean.selectedCar}" id="carTable" lazy="true">

                    <p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}" update=":form:display" oncomplete="PF('carDialog').show()" />
                    
                    <p:column headerText="Model" sortBy="model" filterBy="#{car.model}">
                        <h:outputText value="#{car.model}" />
                    </p:column>

                    <p:column headerText="Year" sortBy="year" filterBy="#{car.year}">
                        <h:outputText value="#{car.year}" />
                    </p:column>

                    <p:column headerText="Manufacturer" sortBy="manufacturer" filterBy="#{car.manufacturer}">
                        <h:outputText value="#{car.manufacturer}" />
                    </p:column>

                    <p:column headerText="Color" sortBy="color" filterBy="#{car.color}">
                        <h:outputText value="#{car.color}" />
                    </p:column>
                </p:dataTable>

                <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
                          showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/resources/images/cars/#{tableBean.selectedCar.manufacturer}.gif"/>
                        </f:facet>

                        <h:outputText value="Model:" />
                        <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

                        <h:outputText value="Year:" />
                        <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>

                        <h:outputText value="Manufacturer:" />
                        <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

                        <h:outputText value="Color:" />
                        <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
                    </h:panelGrid>
                </p:dialog>

            </h:form>

        </div>


    </ui:define>
</ui:composition>
